<!--
 * @Description: 基础瀑布图
 * @Author: xjc
 * @Date: 2022-06-21 15:11:33
 * @LastEditTime: 2022-06-21 15:13:42
 * @LastEditors: xjc
-->
<template>
  <div id="waterfall-container" />
</template>

<script setup>
import {onMounted} from 'vue'
// eslint-disable-next-line no-undef
const {Waterfall} = G2Plot

onMounted(() => {
  const data = [
    {type: '日用品', money: 120},
    {type: '伙食费', money: 900},
    {type: '交通费', money: 200},
    {type: '水电费', money: 300},
    {type: '房租', money: 1200},
    {type: '商场消费', money: 1000},
    {type: '红包收入', money: -2000},
  ]

  const waterfallPlot = new Waterfall('waterfall-container', {
    data,
    xField: 'type',
    yField: 'money',
    appendPadding: [15, 0, 0, 0],
    meta: {
      type: {alias: '类别'},
      money: {
        alias: '收支',
        formatter: v => `${v} 元`,
      },
    },
    label: {
      style: {fontSize: 10, fill: 'rgba(0,0,0,0.65)'},
      layout: [{type: 'interval-adjust-position'}],
    },
    total: {
      label: '总支出',
      style: {fill: '#96a6a6'},
    }
  })

  waterfallPlot.render()
})
</script>
